<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
    <style lang="less" scoped>
        .login_container{
            background-color: #2b4b6b;
            height: 100%;
        }
        .login_box{
            width: 450px;
            height:70%;
            background-color: #fff;
            border-radius:3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            /* overflow-y: scroll; */
        }
        .avatar_box{
            height: 130px;
            width: 130px;
            border-radius: 50%;
            border: 1px solid #eee;
            padding:10px;
            position: absolute;
            box-shadow: 0 0 10px #ddd;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
        }
        .avatar_box img{
            border-radius: 50%;
            width: 100%;
            height: 100%;
            background-color: #eee;
        }
        .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }

        table{
            width: 100%;
        }
        table td{
            width: 100%;
            padding: .3rem;
            font-weight: 300;
            font-size: 14px;
            color: #4c4c4c;
            text-align: justify;
        }
        input[type="text"]{
            appearance: none;
            border-radius:6px;
            border: 1px solid #ccc;
            font-size: 14px;
            color: #4c4c4c;
            padding: .3rem;
            box-shadow: 0 0 3px 1px rgba(66,66,66,.05);
            outline:none;
        }
        input[type="button"]{
            appearance: none;
            padding: .3rem;
            width: 100%;
            border: none;
            box-shadow: 0 0 3px 1px rgba(0,0,0,.1);
            border-radius: 15px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background-color: rgb(0, 104, 173);
        }
    </style>
    <div class="login_container">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="avatar_box">
                <img src="images/logo.jpg" alt="">
            </div>
            <!-- 登录表单区域 -->
            <table label-width="0px" class="login_form">
                <!-- 页面标题 -->
                <tr>
                    <td>
                        页面标题
                    </td>
                    <td>
                        <input id="title" type="text" value="共浴理性之光 助燃品牌力量">  
                    </td>
                </tr>
                <tr>
                    <td>
                        本环节主题
                    </td>
                    <td>
                        <input id="ptitle" type="text" value="幸运大抽奖">  
                    </td>
                </tr>
                <!-- 密码 -->
                <tr>
                    <td>
                        抽奖最大人数
                    </td>
                    <td>
                        <input id="max_num" type="text" value="500">  
                    </td>
                </tr>
                <!-- 轮数 -->
                <tr>
                    <td>
                        总轮数
                    </td>
                    <td>
                        <input id="rounds" type="number" min="1" max="10" value="1">
                        <script>
                            $('input[type=number]').keypress(function(e) {
                            　　if (!String.fromCharCode(e.keyCode).match(/[0-9\.]/)) {
                            　　　　return false;
                            　　}
                            });
                            $("#rounds").change(function(){
                                var currentRounds = $(this).val();
                                var count = currentRounds-$("#rounds_wrap").children().length+1;
                                console.log(currentRounds);
                                console.log(count);
                               if(count>0){
                                   for(var i =0;i<count;i++){
                                    var c = parseInt($("#rounds_wrap").children().length);
                                    console.log("Childrens："+$("#rounds_wrap").children().length);
                                    console.log("C："+c);
                                    $("#rounds_wrap").append('<table class="roundsinfo" roundid="'+c+'" width="100%"><tr><td colspan="2">第'+c+'轮</td></tr><tr><td width="30%">奖项名</td><td><input id="rounds_name'+c+'" type="text" value="第'+c+'轮"></td></tr><tr><td width="30%">本轮抽取人数</td><td><input id="Counts'+c+'" type="number" value="10"></td></tr><tr><td width="30%">是否允许重复</td><td><select name="isRepeat" id="isRepeat'+c+'"><option value="false">否</option><option value="true">是</option></select></td></tr></table>');
                                   }
                               }
                               if(count<0){
                                   for(var i=0;i<-count;i++){
                                    $("#rounds_wrap table:last").remove();
                                   }
                               }
                            });
                        </script>
                    </td>
                </tr>
                <!-- 轮数 -->
                <tr>
                    <td colspan="2">
                        <div id="rounds_wrap" style="height: 150px;overflow-y: scroll;width: 100%;padding:.5rem 0;border: 1px dashed #999;">
                            <style>
                                .roundsinfo{
                                    margin-top: .5rem;
                                }
                                #rounds_wrap table td{
                                    font-size: 14px;
                                }
                            </style>
                            <table class="roundsinfo" roundid="1" width="100%"><tr><td colspan="2">第1轮</td></tr><tr><td width="30%">奖项名</td><td><input id="rounds_name1" type="text" value="第1轮"></td></tr><tr><td width="30%">本轮抽取人数</td><td><input id="Counts1" type="number" value="10"></td></tr><tr><td width="30%">是否允许重复</td><td><select name="isRepeat" id="isRepeat1"><option value="false">否</option><option value="true">是</option></select></td></tr></table>
                        </div>
                    </td>
                </tr>
                <!-- 提交按钮 -->
                <tr>
                    <td colspan="2">
                        <input type="button" id="export" value="生成配置文件"/>
                        <p style="font-weight: 300;font-size: 14px;width: 100%;text-align: left;color:#4c4c4c;">
                            覆盖到：<span id="path" style="color: #2b4b6b;"></span>
                        </p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    <script>
        $(()=>{
            //获取路径
            var path = window.document.location.href;
            path = path.substring(8,path.length-6);
            $("#path").html(decodeURI(path)+"config.json");
            //保存配置文件
            var button = document.getElementById("export");
            button.addEventListener("click", saveHandler, false);
            function saveHandler(){
                var title = $("#title").val();
                var ptitle = $("#ptitle").val();
                var max_num = $("#max_num").val();
                var rounds = Array();
                $(".roundsinfo").each(function(){
                    var roundid = $(this).attr("roundid");
                    var data = {
                        "rounds_name":$("#rounds_name"+roundid).val(),
                        "Counts":$("#Counts"+roundid).val(),
                        "isRepeat":$("#isRepeat"+roundid).val()
                    };
                    rounds.push(data);
                });
                let data = {"title":title,"ptitle":ptitle,"max_num":max_num,"rounds":rounds};
                console.log(data);
                var content = JSON.stringify(data);
                var blob = new Blob(["getJson("+content+")"], {type: "text/plain;charset=utf-8"});
                saveAs(blob, "config.json");
            }
        });
    </script>

    <!-- 代码 结束 -->
    <script>
    function getJson(data){
        $("#settings").val(JSON.stringify(data));
    }
    </script>
    <!-- 引入配置文件 -->
    <script type="text/javascript" src="config.json?callback=getJson"></script>
    </body>
</html>